<template>
  <x-modal
    :visible.sync="show"
    background="transparent"
    width="750"
    padding="0"
    class="x-groups-modal"
    @cancel="handleCancel"
  >
    <view v-if="coupon">
      <x-send-coupon :coupon="coupon" @sendcoupon="handleContentClick">
        <p-content :detail="detail" :is-primary-page="isPrimaryPage" @finish="handleCancel" />
      </x-send-coupon>
    </view>
    <view v-else @click="handleContentClick">
      <p-content :detail="detail" :is-primary-page="isPrimaryPage" @finish="handleCancel" />
    </view>
  </x-modal>
</template>

<script>
import XModal from '@/components/x-modal';
import XSendCoupon from '@/components/x-send-coupon';
import PContent from './content';

export default {
  name: 'XGroupsModal',
  components: {
    XModal,
    XSendCoupon,
    PContent
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    isPrimaryPage: {
      type: Boolean,
      default: false
    },
    detail: {
      type: Object,
      default: () => null
    },
    coupon: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      show: this.visible
    };
  },
  computed: {},
  watch: {
    visible(value) {
      this.show = value;
    }
  },
  created() {},
  methods: {
    handleCancel() {
      this.$emit('update:visible', false);
      this.$emit('cancel');
      this.$XTrack('onDecorateModalCancel');
    },
    // 这边点击事件不能穿透过去，所以单独也执行一次click回调
    handleContentClick() {
      this.$emit('click');
      this.$emit('update:visible', false);
      this.$XTrack('onDecorateModalConfirm');
    }
  }
};
</script>

<style lang="scss" scoped>
  .x-groups-modal{
    ._send{ width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;}
  }
</style>
